<template>
    <!-- 重置邮箱 -->
    <div>
        <el-card class="box-card">
            <el-form ref="form" label-width="120px">
                <el-form-item label="新邮箱地址">
                    <el-input v-model.trim.trim="emailAddress"/>
                    <!-- 未发送显示 获取验证码；已发送，按钮禁止点击，显示倒计时数值 -->
                    <el-button v-if="!sending" class="code" type="primary" @click="getVerifyCode">获取验证码</el-button>
                    <el-button v-else type="primary" @click="getVerifyCode" disabled><b class="count">{{ leftSecond
                        }} </b> 秒后重新发送
                    </el-button>
                </el-form-item>
                <el-form-item label="验证码">
                    <el-input v-model.trim.trim="verifyCode"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="updateEmail">修改邮箱</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
    <!-- /重置邮箱 -->
</template>
<script>
    import {getVerifyCode, updateEmail} from '@/api/api'

    export default {
        name: "Email",
        data() {
            return {
                emailAddress: '',
                verifyCode: '',
                type: 'update',
                // 发送验证码倒计时
                sending: false, // 是否发送验证码
                second: 60, // 倒计时间
                leftSecond: 0, // 剩余时间
            }
        },
        methods: {
            // 异步发送邮箱验证码
            async getVerifyCode() {
                // 1、校验邮箱格式是否正确
                let reg = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/
                if (!reg.test(this.emailAddress)) {
                    this.$message.error('邮箱地址不正确，请重新输入')
                    return
                }
                // 防止重复提交
                if (this.sending) return
                this.sending = true  // 显示倒计时
                // 调用倒计时方法
                this.timeDown()
                // 发送验证码邮件
                const {code, message} = await getVerifyCode(this.type, this.emailAddress)
                this.$message.success('系统已把验证码发送至您的邮箱 ' + this.emailAddress)
                if (code !== 20000) {
                    this.leftSecond = null // 清空倒计时间
                    this.$message.error(message)
                    return false
                }
            },
            // 倒计时
            timeDown() {
                // leftSecond 剩余时间；second 倒计时
                this.leftSecond = this.second
                const timmer = setInterval(() => {
                    this.leftSecond--
                    if (this.leftSecond <= 0) {
                        //停止计时
                        clearInterval(timmer)
                        this.sending = false // 不显示发送验证码
                    }
                }, 1000)
            },
            // 更新邮箱
            updateEmail() {
                // 内容校验
                if (this.emailAddress === '') {
                    this.$message.error('邮箱地址不能为空')
                    return;
                }
                if (this.verifyCode === '') {
                    this.$message.error('验证码不可以为空')
                    return;
                }
                if (this.verifyCode !== '' && this.verifyCode.length !== 6) {
                    this.$message.error('验证码错误')
                    return;
                }
                // 发送请求，更新邮箱
                updateEmail(this.emailAddress, this.verifyCode).then(response => {
                    if (response.code === 20000) {
                        // 更新成功，给出提示，清空验证码框
                        this.$message.success(response.message)
                        this.emailAddress = ''
                        this.verifyCode = ''
                    } else {
                        this.verifyCode = ''
                        this.$message.error(response.message)
                    }
                })

            }

        }
    }
</script>
<style scoped>
    div .el-input {
        max-width: 350px;
    }

    .code {
        margin-left: 20px;
    }

    .count {
        color: red;
    }

    .el-card {
        width: 700px;
        margin: 50px auto;
    }
</style>